<template>
  <div class="common-layout">
    <el-container>
      <el-header class="el-header">
        <div>
          <img
            :src="headPic"
            style="width: 1rem; height: 1rem; border-radius: 50%"
            alt=""
            @click="www"
            class="oror"
          />
        </div>
        <div>
          <h3>{{ fuck.disease }}</h3>
        </div>

        <img src="../../assets/3.png" alt="" class="yes" @click="yyy" />
      </el-header>

      <div class="cheng"></div>
      <el-main>
        <div class="baga">
          <h1 class="ls">{{ fuck.detail }}</h1>
          <p class="ls">[病症]</p>

          <p class="p1">{{ fuck.disease }}</p>
          <div class="liu"></div>
          <p class="ls">[科室]</p>
          <p class="p1">{{ fuck.department }}</p>
          <div class="liu"></div>
          <p class="ls">[病症详情]</p>
          <p class="p1">{{ fuck.title }}</p>
          <div class="liu"></div>
          <p class="ls">[治疗经历]</p>
          <p class="p1">
            <span style="font-size: 25px; line-height: 0.5rem">{{ fuck.treatmentHospital }}</span>
          </p>
          <p class="p1">
            {{ fuck.treatmentProcess }}
          </p>
          <div class="liu"></div>
          <p class="ls">[相关图片]</p>
          <img class="img1" src="@/image/病例照片.png" alt="" />

          <p class="zp">
            <el-icon class="ic1" @click="tocollect"
              ><img src="../../assets/233.png" alt="" v-if="collection" @click="sc" /><img
                src="../../assets/322.png"
                alt=""
                v-else
                @click="qx" /></el-icon
            ><span class="fff">{{ fuck.collectionNum }}</span>

            <el-icon class="ic" @click="show = true">
              <ChatDotRound /> </el-icon
            ><span class="fff1">{{ fuck.commentNum }}</span>
          </p>

          <p class="p2">被采纳的建议</p>
          <div>
            <div class="uia">
              <img src="@/assets/girl.png" alt="" />
              <h2>猪小妹</h2>
              <p class="opop">获得20H币</p>
              <p class="youfu">2018.9.20</p>
            </div>
          </div>
          <p class="yus">
            你好，面神经炎也叫面神经麻痹或周围性面瘫，急性期可以应用抗病毒药物和激素，营养神经，活血等治疗，同时可以合并针灸
          </p>
          <div class="khz"></div>

          <van-overlay :show="show" class="opopq">
            <div class="hzhz">
              <div class="zhan"></div>
              <div class="daliebiao">
                <div class="ysjy" v-for="(item, index) in List1" :key="index">
                  <div class="qqq">
                    <img
                      src="@/assets/y1.png"
                      alt=""
                      @click="handleto(item.commentUserId, item.nickName)"
                    />
                  </div>
                  <div class="right">
                    <h2>{{ item.nickName }}</h2>
                    <p class="xiao">
                      {{ item.content }}
                    </p>
                    <span class="sj">{{ item.commentTime }}</span>

                    <span class="dz"
                      ><img src="@/assets/点赞.png" alt="" class="cai" /> 99
                      <img src="@/assets/踩.png" alt="" class="cai" /> 5</span
                    >
                  </div>
                </div>
                <!-- <div class="pinglun">
                <div class="pinglun">
   <div class="qqq">
                    <img src="@/assets/boy.png" alt="" />
                  </div>
                  <div class="right">
                    <h2>我</h2>
                    <p class="xiao">
                         {{ fadata }}
                    </p>
                    <span class="sj">
                      {{ currentTime }}
                    </span>

                    <span class="dz"><img src="@/assets/点赞.png" alt="" class="cai"> 99 <img src="@/assets/踩.png" alt=""
                        class="cai"> 5</span>
                  </div>





                </div> -->
                <!-- </div>
              </div> -->

                <!-- <div class="ysjy1">
              <div class="qqq">
                <img src="@/assets/y2.png" alt="" @click="tiaozhuan" />
              </div>
              <div class="right" @click="tiaozhuan">
                <h2>小妮子</h2>
                <p class="xiao">
                  继续听医生的安排给予激素类药物衣机营的药物对症处理同时配合针灸理疗效果还是很好的大多数都会痊愈所以不要着急
                </p>
                <span class="sj">03/22/2018</span>

       <span class="dz"><img src="@/assets/点赞.png" alt="" class="cai"> 99 <img src="@/assets/踩.png" alt="" class="cai"> 5</span>
              </div>
            </div> -->
              </div>

              <div class="fbfb">
                <div><van-icon name="clear" class="qqq" @click="show = false" /></div>
                <input
                  type="text"
                  placeholder="在此发表你的看法"
                  @keyup.enter="toWrite"
                  v-model="ping"
                />
                <!-- <input class="inp" type="text" v-model="ping" placeholder="在此留下高见吧！！">
                                    <button @click="toWrite">发送</button> -->
              </div>
            </div>
          </van-overlay>
        </div>
      </el-main>
    </el-container>
  </div>
  <div class="chengkai"></div>
  <div class="xie">
    <img src="@/assets/编辑(1).png" alt="" class="xie1" @click="fabiao" />
  </div>
  <!-- <div class="dxhz">
    <img src="@/assets/主页(1).png" alt="" class="zhuye" @click="zyzy" />
    <img src="@/assets/播放(1).png" alt="" class="bofang" />
  </div> -->
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import router from '@/router'
import { useMybyq } from '@/stores/my_byq'

import { ElMessage } from 'element-plus'
import {
  getSickCircleInfo,
  getSickCircleCommentList,
  getpublishCommentList,
  getaddUserSickCollection,
} from '@/api/api'
import { request } from '@/axios/request'
const fuck: any = ref([])
const route = useRoute()
const ping = ref()
const flag = ref(false)
const sessionId = ref(Number(localStorage.getItem('sessionId')?.replace(/"/g, '')) || 0)
const biao = ref('')

// 修改头像
const headPic = localStorage.getItem('headPic')
const collection = ref(true)

const userId = ref(localStorage.getItem('userId'))
// const sickCircleId = localStorage.getItem('sickCircleId')
const show = ref(false)

const List1 = ref([])
const active = ref(0)
const id = route.params.sickCircleId
const getSickCircleInfoList = async () => {
  const { data: res } = await getSickCircleInfo({
    sickCircleId: id,
  })
  // collectionNum
  console.log(res.result)
  fuck.value = res.result
  console.log(fuck.value)
  // let date = new Date(detailData.value.treatmentStartTime)
  // console.log(detailData.value.treatmentStartTime);
  // releaseTime.value = formData(date, 'yyyy-MM-dd hh:mm')
  // let date1 = new Date(detailData.value.adoptTime)
  // // console.log(detailData.value.adoptTime);
  // time.value = formData(date1, 'yyyy-MM-dd')
}
getSickCircleInfoList()

console.log(id)
const currentTime = new Date().toLocaleString()
const getList1 = async (active) => {
  // console.log(id)

  let res1 = await axios.get(`/health/user/sickCircle/v1/findSickCircleCommentList`, {
    params: { sickCircleId: active, page: 1, count: 20 },
  })
  console.log(res1)

  List1.value = res1.data.result
}

const getDeatail = async (id: number) => {
  await axios
    .get(`/health/user/sickCircle/v1/findSickCircleInfo?sickCircleId=${id}`)
    .then((res) => {
      console.log(res.data.result)
      fuck.value = res.data.result
    })
}
const toWrite = async () => {
  localStorage.setItem('sickCircleId', id)
  localStorage.setItem('biao', ping.value)
  console.log(ping.value)
  const { data: res } = await axios.post(
    '/health/user/sickCircle/verify/v1/publishComment',
    {
      sickCircleId: id,

      content: ping.value,
    },
    {
      headers: {
        userId: userId.value,
        sessionId: sessionId.value,
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    },
  )
  console.log(res)
  // router.push('/BingWrite')
  show.value = false
}
const fadata = localStorage.getItem('biao')
const Mystore = useMybyq()
const mystore = ref(Mystore.getArray())
const sc = () => {
  flag.value = !flag.value
  if (fuck.value) {
    // Mystore.addToArray(fuck.value)
  }
  // console.log(Mystore.getArray);
  console.log(fuck.value)
  if (mystore.value) {
    fuck.value.collectionNum++
  }
}
const qx = () => {
  flag.value = !flag.value
  if (mystore.value) {
    fuck.value.collectionNum--
  }
}
getDeatail(id)
const yyy = () => {
  router.push('/my_message')
}
const fabiao1 = () => {
  router.push('/fabiao')
}
const fabiao = () => {
  router.push('/fabiao')
}
const www = () => {
  router.push('/my')
}
const tiaozhuan = () => {
  router.push('/yhxx')
}
const tiaozhuan1 = () => {
  router.push('/yhxx2')
}
// const getlist=()=>{
//     axios.get(`/health/user/sickCircle/v1/findSickCircleInfo?sickCircleId=`+id).then((res)=>{
//         console.log(res)
//         datalist.value=res.data.result;
//     })
// }
// getlist();
onMounted(() => {
  active.value = id
  getList1(active.value)
})
const tocollect = async () => {
  if (collection.value) {
    const { data: res } = await getaddUserSickCollection(
      {
        sickCircleId: id,
      },
      {
        headers: {
          userId: userId.value,
          sessionId: sessionId.value,
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    )
    console.log(res)
    if (res.status === '0000') {
      ElMessage.success(res.message)
      // message: res.message,
      // color: "#fff",
      // background: "green",
      collection.value = false
      // detailData.collectionNum.value += 1
    }
    getSickCircleInfoList()
  } else {
    await request.delete('/health/user/verify/v1/cancelSickCollection', {
      params: {
        sickCircleId: id,
      },
      headers: {
        userId: userId.value,
        sessionId: sessionId.value,
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
    getSickCircleInfoList()
    ElMessage.error('取消收藏')
    collection.value = true
  }
}
const handleto = (id: any, name: any) => {
  // console.log(111)
  router.push(`/yhxx/${id}/${name}`)
}
</script>

<style scoped lang="scss">
.zhan {
  width: 100%;
  height: 2.5rem;
}
.cai {
  width: 20px; // 30px * 0.5
  height: 20px; // 30px * 0.5
}

.dz {
  font-size: 20px; // 20px * 0.5
  position: absolute;
  right: 5%; // 5% * 0.5
  bottom: 5%; // 5% * 0.5
}

.hzhz {
  width: 100%;
  height: 17.8rem; // 17.8rem * 0.5
}
.daliebiao {
  width: 100%;
  height: 9.5rem;
  overflow-y: auto;
}
.pinglun {
  width: 100%;

  height: 10rem;

  display: flex;
  margin-top: 0.4rem;

  height: 100px; // 135px * 0.5
  top: 40%; // 40% * 0.5
  left: 0;
  overflow: auto;

  .qqq {
    width: 2.5rem; // 2.5rem * 0.5
    height: 2.5rem; // 2.5rem * 0.5
    position: relative;

    img {
      position: absolute;
      top: 10%; // 10% * 0.5
      left: 35%; // 35% * 0.5
      border-radius: 50%;
      width: 50%;
      height: 50%;
    }
  }

  .right {
    width: 70%;
    height: 2.6rem; // 2.6rem * 0.5
    background-color: #fff;
    border-radius: 5px; // 5px * 0.5
    margin-left: 10px; // 10px * 0.5
    position: relative;
    font-size: 6.5px; // 13px * 0.5

    .xiao {
      width: 90%;
      margin: 0 auto;
      font-size: 10px; // 20px * 0.5
    }

    h2 {
      font-size: 0.35rem;
      width: 90%;
      line-height: 0.8rem; // 0.8rem * 0.5
      margin-left: 0.3rem; // 0.3rem * 0.5
    }

    .sj {
      position: absolute;
      font-size: 9px; // 18px * 0.5
      font-weight: 500;
      left: 5%; // 5% * 0.5
      bottom: 5%; // 5% * 0.5
    }

    .dz {
      font-size: 10px; // 20px * 0.5
      position: absolute;
      right: 0%;
      bottom: 0%;
    }
  }
}
.liu {
  width: 100%;
  height: 10px; // 20px * 0.5
}

.zhuye {
  width: 1rem; // 1rem * 0.5
  height: 1rem; // 1rem * 0.5
  position: absolute;
  left: 1rem; // 1rem * 0.5
  top: 5%; // 5% * 0.5
}

.bofang {
  width: 1rem; // 1rem * 0.5
  height: 1rem; // 1rem * 0.5
  position: absolute;
  right: 1rem; // 1rem * 0.5
  top: 5%; // 5% * 0.5
}

.dxhz {
  width: 100%;
  height: 1.4rem; // 1.4rem * 0.5
  background-color: #fff;
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-image: url('../../assets/beijing1.png');
  background-size: 100% 100%;
  z-index: 997;
}

.yes {
  margin-top: 0.1rem;
  width: 0.7rem; // 0.7rem * 0.5 = 0.35rem
  height: 0.8rem; // 0.8rem * 0.5 = 0.4rem
}

.xie {
  width: 1.5rem; // 1.5rem * 0.5
  height: 1.5rem; // 1.5rem * 0.5
  position: fixed;
  left: 43%; // 43% * 0.5
  bottom: 5%; // 5% * 0.5
  background-color: yellow;
  z-index: 998;
  background-color: rgb(47, 135, 234);
  box-shadow: 0 0 5px 2.5px rgba(47, 135, 234, 0.3); // 10px和5px分别减半
  border-radius: 50%;

  img {
    margin-top: 0.3rem; // 0.3rem * 0.5
    margin-left: 0.3rem; // 0.3rem * 0.5
    width: 60%;
    height: 60%;
  }
}

.uia {
  margin-top: 0.5rem; // 0.5rem * 0.5
  width: 100%;
  height: 1rem; // 1rem * 0.5
  position: relative;

  h2 {
    font-size: 14px; // 28px * 0.5
    line-height: 0px;
    font-weight: 500;
  }

  h2,
  p {
    margin-left: 1.5rem; // 1.5rem * 0.5
  }

  img {
    width: 1rem; // 1rem * 0.5
    height: 1rem; // 1rem * 0.5
    position: absolute;
    top: -27%; // -27% * 0.5
    left: 3%; // 3% * 0.5
  }
}

.youfu {
  position: absolute;
  right: 0%;
  top: 0%;
}

.opopq {
  z-index: 999;
}

.opop {
  line-height: 1rem; // 1rem * 0.5
  color: rgb(234, 189, 105);
}

.cheng {
  width: 100%;
  height: 1.5rem; // 1.5rem * 0.5
}

.ysjy {
  display: flex;
  margin-top: 0.4rem;
  width: 100%;
  height: 100px; // 135px * 0.5
  top: 40%; // 40% * 0.5
  left: 0;

  .qqq {
    width: 2.5rem; // 2.5rem * 0.5
    height: 2.5rem; // 2.5rem * 0.5
    position: relative;

    img {
      position: absolute;
      top: 10%; // 10% * 0.5
      left: 35%; // 35% * 0.5
      border-radius: 50%;
      width: 50%;
      height: 50%;
    }
  }

  .right {
    width: 70%;
    height: 2.6rem; // 2.6rem * 0.5
    background-color: #fff;
    border-radius: 5px; // 5px * 0.5
    margin-left: 10px; // 10px * 0.5
    position: relative;
    font-size: 6.5px; // 13px * 0.5

    .xiao {
      width: 90%;
      margin: 0 auto;
      font-size: 10px; // 20px * 0.5
    }

    h2 {
      font-size: 0.35rem;
      width: 90%;
      line-height: 0.8rem; // 0.8rem * 0.5
      margin-left: 0.3rem; // 0.3rem * 0.5
    }

    .sj {
      position: absolute;
      font-size: 9px; // 18px * 0.5
      font-weight: 500;
      left: 5%; // 5% * 0.5
      bottom: 5%; // 5% * 0.5
    }

    .dz {
      font-size: 10px; // 20px * 0.5
      position: absolute;
      right: 0%;
      bottom: 0%;
    }
  }
}

.xx {
  width: 100px; // 100px * 0.5
  height: 100px; // 100px * 0.5
}

.oror {
  margin-top: 10px; // 10px * 0.5
  margin-right: 5px; // 5px * 0.5
}

.fbfb {
  display: flex;
  width: 100%;
  height: 60px; // 60px * 0.5
  position: absolute;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  bottom: 10%; // 10% * 0.5
  left: 0;

  .qqq {
    margin-left: 15%; // 15% * 0.5
    line-height: 60px; // 60px * 0.5
    font-size: 1rem; // 1rem * 0.5
  }

  input {
    line-height: 1rem; // 1rem * 0.5
    width: 70%;
    height: 1rem; // 1rem * 0.5
    background-color: #000;
    color: #fff;
    margin-left: 10px; // 10px * 0.5
    border-radius: 1rem; // 1rem * 0.5
    padding-left: 1rem; // 1rem * 0.5
    font-size: 0.4rem; // 0.4rem * 0.5
    border: none;
  }
}

.ysjy1 {
  display: flex;
  position: absolute;
  width: 100%;
  height: 135px; // 135px * 0.5
  top: 60%; // 60% * 0.5
  left: 0;

  .qqq {
    width: 2.5rem; // 2.5rem * 0.5
    height: 2.5rem; // 2.5rem * 0.5
    position: relative;

    img {
      position: absolute;
      top: 10%; // 10% * 0.5
      left: 35%; // 35% * 0.5
      border-radius: 50%;
      width: 50%;
      height: 50%;
    }
  }

  .right {
    width: 70%;
    height: 2.6rem; // 2.6rem * 0.5
    background-color: #fff;
    border-radius: 5px; // 5px * 0.5
    margin-left: 10px; // 10px * 0.5
    position: relative;
    font-size: 13px; // 13px * 0.5

    .xiao {
      width: 90%;
      margin: 0 auto;
      font-size: 10px; // 20px * 0.5
    }

    .sj {
      position: absolute;
      font-size: 9px; // 18px * 0.5
      font-weight: 500;
      left: 5%; // 5% * 0.5
      bottom: 5%; // 5% * 0.5
    }

    h2 {
      font-size: 0.35rem;
      margin-left: 0.3rem; // 0.3rem * 0.5
      line-height: 0.8rem; // 0.8rem * 0.5
    }

    .dz {
      font-size: 10px; // 20px * 0.5
      position: absolute;
      right: 0%;
      bottom: 0%;
    }
  }
}

.fuck {
  width: 100%;
  height: 350px; // 350px * 0.5
}

.el-header {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5rem; // 1.5rem * 0.5
  border-bottom: 0.2rem solid rgb(242, 242, 242); // 5px * 0.5
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-header-icon {
  font-size: 15px; // 30px * 0.5
}

.ls {
  color: rgb(102, 165, 240);
  margin-top: 10px; // 20px * 0.5
  line-height: 1rem; // 1rem * 0.5
}

.p1 {
  line-height: 10px; // 10px * 0.5
  color: rgb(97, 97, 97);
}

.p2 {
  font-size: 15px; // 20px * 0.5
  margin-top: 0.5rem; // 0.5rem * 0.5
  padding: 10px; // 10px * 0.5
  border-left: 10px solid rgb(47, 135, 234); // 10px * 0.5
  color: rgb(97, 97, 97);
}

.img1 {
  width: 80%;
  height: 150px; // 300px * 0.5
  margin-left: 10%;
}

.zp {
  width: 100%;
  height: 0.8rem; // 0.8rem * 0.5
  position: relative;
}

.ic {
  position: absolute;
  color: deepskyblue;
  font-size: 0.7rem; // 0.7rem * 0.5
  top: 0%;
  right: 8%; // 10% * 0.5
}

.ic1 {
  position: absolute;
  color: gold;
  font-size: 0.7rem; // 0.7rem * 0.5
  top: 0%;
  right: 23%; // 24% * 0.5
}

.fff {
  position: absolute;
  margin-right: 0.3rem; // 0.3rem * 0.5
  margin-top: 0.5rem; // 0.5rem * 0.5
  font-size: 0.4rem; // 0.4rem * 0.5
  font-weight: 600;
  top: -35%; // -35% * 0.5
  right: 15%; // 18% * 0.5
}

.fff1 {
  position: absolute;
  margin-right: 0.1rem; // 0.1rem * 0.5
  margin-top: 0.5rem; // 0.5rem * 0.5
  font-size: 0.4rem; // 0.4rem * 0.5
  font-weight: 600;
  top: -35%; // -35% * 0.5
  right: 2%; // 5% * 0.5
}

.khz {
  width: 100%;
  height: 0.2rem; // 0.2rem * 0.5
}

.hg {
  font-size: 1rem; // 1rem * 0.5
}

.baga {
  width: 96%;
  margin-left: 2%; // 2% * 0.5
}

.chengkai {
  width: 100%;
  height: 1.5rem; // 1.5rem * 0.5
}

.yus {
  width: 90%;
  margin-left: 5%; // 5% * 0.5
  font-size: 11px; // 22px * 0.5
  color: rgb(99, 99, 99);
  padding: 2px; // 2px * 0.5
}
</style>
